<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .video {
                position: relative;
                margin: 20px auto;
                width: 711px;
                height: 400px;
                border: 3px solid orange;
            }

            .video .play {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                display: none;
                height: 100%;
                transform: translate(-50%, -50%);
                background: rgb(0, 0, 0, .5) url("images/arr.png") no-repeat center center;
            }

            .video:hover .play {
                display: block;
            }

        </style>
    </head>
    <body>


        <div class="video">
            <div class="cover">
                <img src="images/sed.jpg">
            </div>
            <div class="play"></div>
        </div>

    </body>
</html>